<?php /* @var $reaction Reaction */ ?>
<?php use_helper('Date')?>


<div class="tabbed">
	<ul class="tabs">
		<li id="tab-reactions-all" class="tab active">all reactions (<?php echo count($all_reactions)?>)</li>
		<li id="tab-reactions-opposites" class="tab">your perfect opposites</li>
	</ul>


	<div id="reactions-all" class="content group">
		<?php foreach($all_reactions as $reaction):?>
		<ul style="list-style: none; margin:10px 0px; padding: 10px; float: left; <?php if(in_array($reaction->getUser()->getId(),$opposite_ids)) echo ' background-color: #ffcc00;'?>">
			<li style="display: inline; float: left; margin-right: 10px; width: 120px;">
			
				<?php echo image_tag($reaction->getUser()->getThumbnailUrl(),'title='.$reaction->getUser()->getName()); ?><br />
				<strong><?php echo sprintf("%s<br />%2s%%",$reaction->getUser()->getName(),$user->getOppositenessWith($reaction->getUser())) ?></strong>
			</li>
			<li style="display: inline; float: left;">
				<strong><?php echo sprintf('%s ago',time_ago_in_words($reaction->getCreatedAt("U"))) ?></strong><br />
				<em><?php echo $reaction->getText() ?></em>
			</li>
		</ul>
		<?php endforeach; ?>
	</div>
	
	<div id="reactions-opposites" class="content group">
		<?php foreach($opposites_reactions as $reaction):?>
		<ul style="list-style: none; margin:10px 0px; padding: 10px; float: left; <?php if(in_array($reaction->getUser()->getId(),$opposite_ids)) echo ' background-color: #ffcc00;'?>">
			<li style="display: inline; float: left; margin-right: 10px; width: 120px;">
			
				<?php echo image_tag($reaction->getUser()->getThumbnailUrl(),'title='.$reaction->getUser()->getName()); ?><br />
				<strong><?php echo sprintf("%s<br />%2s%%",$reaction->getUser()->getName(),$user->getOppositenessWith($reaction->getUser())) ?></strong>
			</li>
			<li style="display: inline; float: left;">
				<strong><?php echo sprintf('%s ago',time_ago_in_words($reaction->getCreatedAt("U"))) ?></strong><br />
				<em><?php echo $reaction->getText() ?></em>
			</li>
		</ul>
		<?php endforeach; ?>
	</div>
	
</div>